<!--
* @author: XJC
* @date: 2023-11-27 09:20
* @description：index
* @update: 2023-11-27 09:20
-->
<template>
  <div class='smartShelf'>

    <div class='smartShelf-top flex'>
      <div class='smartShelf-top-left flex'>
        <div class='g-txt flex flex-a-center'>
          <div class='g-status'></div>
          <div>正常状态</div>
        </div>
        <div class='r-txt flex flex-a-center'>
          <div class='g-status r-status '></div>
          <div>库位缺料</div>
        </div>
        <div class='r-txt flex flex-a-center'>
          <div class='g-status r-status'></div>
          <div>重量超量程</div>
        </div>
      </div>
      <div>
        <el-button class='chamfer-corners-8' v-if='isCollect' type='primary'
                   @click='isReturn?openDialog(true):confirmCollectOrReturn(true)'>
          <span class='flex flex-center'>
            {{ collectBtnName }}
            <img alt='' class='btn-img' src='@/assets/img/acceptance.png' />
          </span>
        </el-button>
        <el-button class='chamfer-corners-8' v-if='isReturn' type='primary'
                   @click='isCollect?openDialog(false):confirmCollectOrReturn(false)'>
          <span class='flex flex-center'>
            {{ returnBtnName }}
            <img alt='' class='btn-img' src='@/assets/img/hsien.png' />
          </span>
        </el-button>
        <el-button v-if='!isCollect||!isReturn' class='chamfer-corners-8' type='primary' @click='cancelOperate'>
          取消
          <i class='el-icon-circle-close el-icon--right'></i>
        </el-button>
      </div>
    </div>
   <div class='swiper-container' v-if='shelvesList.length' ref="swiperContainer">
     <div class='swiper-wrapper'>
       <div class='swiper-slide'  v-for='(item,index) in shelvesList' :key='item.id'>
         <div class='smartShelf-content-item'
              :class='item.id === selectId ? "smartShelf-content-item-select" : ""'>
           <div class='smartShelf-content-item-top chamfer-corners-8 flex flex-a-center'>
             <div class='t-num'>{{ index + 1 }}</div>
             <div>{{ item.name }} - {{item.code}}</div>
           </div>
           <div class='smartShelf-content-item-bottom flex flex-a-center flex-space-around'>
             <div v-for='(item,index) in shelvesGoods[index].slice(0, 5)' :key='index'>
               <div class='b-item'>
                 <img v-if='item.goodsId && item.goodsImage' :src='item.goodsImage'>
                 <img v-else-if='item.goodsId && !item.goodsImage' src='@/assets/shelf_manage_img/goods-default.png'>
                 <img v-else src='@/assets/shelf_manage_img/shelf-item.png' />
               </div>
               <div class='b-txt'>{{ item.goodsStock || 0 }}</div>
             </div>
             <div>···</div>
           </div>
         </div>
       </div>
     </div>
   </div>
    <div class='smartShelf-bottom' style="overflow-x: auto">
      <div class='smartShelf-bottom-tip'>货架状态</div>
      <van-swipe class="my-swipe" :initial-swipe='selectIndex' @change='swiperChange' :autoplay="0" :loop='false' :show-indicators='false' indicator-color="white">
        <van-swipe-item v-for='(item,i) in shelvesList' :key='i'>
          <div>
            <smart-shelves v-if='showShelves'
                           :smartIndex='i'
                           :collect-or-return='collectOrReturn'
                           @chooseItem='chooseItem'
                           @collectOrReturnChangeMerge='collectOrReturnChangeMerge'
                           :select-position-id='selectPositionId'
                           :is-browse='true'
                           :shelves='item'></smart-shelves>
          </div>
        </van-swipe-item>
      </van-swipe>


    </div>


    <div class='smartShelf-bottom'>
      <div class='smartShelf-bottom-tip flex flex-a-center flex-space-between'>
        <div>物料信息</div>
        <div>
          <el-button class='chamfer-corners-8' :disabled='lastDisabled' :type='lastBtnType'
                     @click='handoffPosition(-1)'>
            上一个
          </el-button>
          <span class='tip-num'
                v-if='shelvesGoods.length'>{{ currentSelectedIndex }}/{{ shelvesGoods[selectIndex].length }}</span>
          <el-button class='chamfer-corners-8' :disabled='nextDisabled' @click='handoffPosition(1)' :type='nextBtnType'>
            下一个
          </el-button>
          <el-button @click='locationGuidelines' class='chamfer-corners-8' type='success'>
            库位指引
          </el-button>

        </div>
      </div>
      <div class='smartShelf-bottom-box flex flex-wrap'>
        <div class='smartShelf-bottom-box-item flex flex-a-center' v-if="selectPositionInfo.positionName">
          <img src='@/assets/smart_shelf_img/wl-0.png' alt=''>
          库位号：{{selectPositionInfo.layerSort || '--'}} 层 {{selectPositionInfo.positionName || '--'}} 号
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center' v-else>
          <img src='@/assets/smart_shelf_img/wl-0.png' alt=''>
          库位号：--
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-1.png' alt=''>
          物料名称：{{ selectPositionInfo.goodsName || '--' }}
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-2.png' alt=''>
          规格型号：{{ selectPositionInfo.goodsModel || '--' }}
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-3.png' alt=''>
          在库数量：{{ selectPositionInfo.stock || '0' }}
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-4.png' alt=''>
          单 重：{{ selectPositionInfo.singleWeight || '0' }}g
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-5.png' alt=''>
          总 重 量：{{ (selectPositionInfo.totalWeight || 0).toFixed(1) }}g
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-6.png' alt=''>
          库存状态：{{ selectPositionInfo.stockStatus | stockStatusFilter }}
        </div>
        <div class='smartShelf-bottom-box-item flex flex-a-center'>
          <img src='@/assets/smart_shelf_img/wl-7.png' alt=''>
          量程状态：{{ selectPositionInfo.maxStatus | maxStatusFilter }}
        </div>
      </div>
    </div>

    <collection-dialog :show-dialog.sync='showDialog'
                       :title='dialogTitle'
                       :collect-or-return-data='collectOrReturnData'
                       @requisitionCompleted='requisitionCompleted'></collection-dialog>
    <realTimeStorage :showDialog.sync='showRealDialog'
                     :in-out-list='inOutList'
                     :goods-list='goodsList'
                     :model='2'
                     :is-type='isCollect ? 1 : (isReturn ? 2 : 0)'
                     @operationCompleted='operationCompleted'
                     :nick-name='nickName'
                     :task-name='taskName'></realTimeStorage>
  </div>
</template>

<script>
import smartShelves from '@/components/SmartShelves/index.vue'
import { getShelvesList, queryByPositionId, lampPosition, lampPositionIsOpen } from '@/api/smartShelf.js'
import CollectionDialog from '@/views/pageUser/smartShelf/components/collectionDialog.vue'
import RealTimeStorage from '@/components/realTimeStorage/index.vue'
import { mixins as wsData } from '@/mixins'
import swiper from 'swiper'
import request from '@/utils/request'

export default {
  name: 'index',
  components: {
    RealTimeStorage,
    CollectionDialog,
    smartShelves
  },
  data() {
    return {
      // 选中的货架下标
      selectIndex: 0,
      // 货架数据
      shelvesList: [],
      // 货架详情数据
      shelves: {},
      // 是否显示货架
      showShelves: false,
      // 货架的物料数据
      shelvesGoods: [],
      // 当前选中的物料下标
      currentSelectedIndex: 1,
      // 当前选中的库位id
      selectPositionId: '',
      // 当前选中的库位信息
      selectPositionInfo: {},
      // 是否是手动领用或归还
      collectOrReturn: false,
      dialogTitle: '确认领用物料',
      collectBtnName: '领用',
      returnBtnName: '归还',
      // 手动领用或归还选中的数据
      collectOrReturnData: [],
      // 定时器
      timer: null,
      // 库位指引开关
      lampOpen: false,
      // 库位指引id
      lampId: null,
      infoTimer: null,
      // 上一个按钮是否禁用
      lastDisabled: true,
      // 下一个按钮是否禁用
      nextDisabled: false,
      // 上一个按钮的类型
      lastBtnType: 'info',
      // 下一个按钮的类型
      nextBtnType: 'primary',
      // 是否显示弹窗
      showDialog: false,
      // 是否是领用
      isCollect: true,
      // 是否是归还
      isReturn: true,
      // 实时出入库弹窗
      showRealDialog: false,
      // 手动领用或归还选中的数据
      goodsList: [],
      // 实时出入库数据
      inOutList: [],
      // 任务名称
      taskName: '',
      nickName: '',
      selectId: '',
      startX: null,
      action: false,
      // 货架滑块
      swiper: null,
      smartSelectData:{}
    }
  },
  // 计算属性（类似于data概念）
  computed: {},

  // 过滤器
  filters: {
    stockStatusFilter(val) {
      if (val) {
        return '缺货'
      } else if (val === false) {
        return '正常'
      } else {
        return '--'
      }
    },
    maxStatusFilter(val) {
      if (val) {
        return '超重'
      } else if (val === false) {
        return '正常'
      } else {
        return '--'
      }
    }
  },

  // 监视器（监视data中的数据变化）
  watch: {
    currentSelectedIndex(val) {
      if (val === 1) {
        this.lastDisabled = true
        this.nextDisabled = false
        this.lastBtnType = 'info'
        this.nextBtnType = 'primary'
      }else if (val === this.shelvesGoods[this.selectIndex].length) {
        this.lastDisabled = false
        this.nextDisabled = true
        this.lastBtnType = 'primary'
        this.nextBtnType = 'info'
      } else {
        this.lastDisabled = false
        this.nextDisabled = false
        this.lastBtnType = 'primary'
        this.nextBtnType = 'primary'
      }
    }
  },

  // 方法合集
  methods: {
    swiperChange(e){
      if (this.selectIndex>e){
        this.swiper.slidePrev()
      }else {
        this.swiper.slideNext()
      }
      this.selectIndex=e
      if (this.selectIndex >= this.shelvesList.length) {
        this.selectIndex = 0
      }
      this.selectShelf()
      this.updateSwiperContainerClass()
    },
    handleMouseDown(event) {
      // 记录鼠标按下时的初始位置
      this.startX = event.clientX;
    },
    handleMouseMove(event) {
      if (this.startX!== null) {
        // 计算鼠标移动的距离
        const moveX = event.clientX - this.startX;

        // 判断左滑还是右滑
        if (moveX > 0 && !this.action) {
          this.action = true
          console.log("右滑")
          this.selectDownShelf()
        } else if (moveX < 0 && !this.action) {
          this.action = true
          console.log("左滑")
          this.selectUpShelf()
        }
      }
    },
    handleMouseUp(event) {
      // 清除初始位置记录
      this.startX = null;
      this.action = false
      console.log(this.startX)
    },
    handleTouchStart(event) {
      // 阻止默认的滑动行为
      event.preventDefault();
      // 记录鼠标按下时的初始位置
      this.startX = event.touches[0].clientX;
    },
    handleTouchMove(event) {
      event.stopPropagation()
      if (this.startX!== null) {
        // 计算鼠标移动的距离
        const moveX = event.touches[0].clientX - this.startX;

        // 判断左滑还是右滑
        if (moveX > 0) {
          this.startX = null;
          console.log("右滑")
          this.selectDownShelf()
        } else if (moveX < 0) {
          this.startX = null;
          console.log("左滑")
          this.selectUpShelf()
        }
      }
    },
    handleTouchUp() {
      // 清除初始位置记录
      this.startX = null;
      this.action = false
      console.log(this.startX)
    },
    // 打开弹窗
    openDialog(isCollect) {
      const action = isCollect ? '领用' : '归还'
      this.dialogTitle = `确认${action}物料`
      this.isCollect = isCollect
      this.isReturn = !isCollect
      if (isCollect) {
        this.collectBtnName = '确认领用'
      } else {
        this.returnBtnName = '确认归还'
      }
      this.collectOrReturn = true
    },
    // 确认领用或归还
    confirmCollectOrReturn(isCollect) {
      if (this.collectOrReturnData.length === 0) {
        this.$message({
          message: '请选择库位',
          type: 'warning',
          showClose: true
        })
        return
      }
      let name = this.shelvesList[this.selectIndex].name
      let code = this.shelvesList[this.selectIndex].code
      // [
      //   {
      //     计划出入库数量
      //     "planCount": 0,
      //     货位id
      //     "positionId": 0,
      //      实际出入库数量
      //     "realCount": 0,
      //      任务名称
      //     "taskName": "",
      //      出入库类型 0-正常 1-出库 2-入库
      //     "type": 0
      //   }
      // ]
      this.collectOrReturnData.forEach(item => {
        this.$set(item, 'planCount', 0)
        this.$set(item, 'positionId', item.id)
        this.$set(item, 'positionCode', item.weightCode)
        // this.$set(item, 'shelvesName', name)
        // this.$set(item, 'shelvesCode', code)
        this.$set(item, 'realCount', 0)
        this.$set(item, 'taskName', '默认任务')
        this.$set(item, 'isHand', true)
        // 出入库类型 0-正常 1-出库 2-入库
        this.$set(item, 'type', isCollect ? 1 : 2)
        this.$set(item, 'isEdit', false)
      })
      // 打开弹窗
      this.showDialog = true
    },
    // 取消操作
    cancelOperate() {
      this.collectBtnName = '领用'
      this.returnBtnName = '归还'
      this.isReturn = true
      this.isCollect = true
      this.collectOrReturnData = []
      this.smartSelectData={}
      this.collectOrReturn = false
    },
    // 货架的选中
    selectTheShelf() {
      const swiperInstance = this.swiper;

      // 获取当前点击的滑块索引
      const index = swiperInstance.realIndex;

      this.selectId = this.shelvesList[index].id
      this.selectIndex = index
      this.shelves = this.shelvesList[index]
      this.currentSelectedIndex = 1
      this.selectPositionId = this.shelvesGoods[index][0].id
      this.selectPositionInfo = {}
      this.queryByPositionId(this.selectPositionId)
      if (this.collectOrReturn) {
        // this.cancelOperate()
      }

      this.btnChange()
    },
    btnChange(){
      if (this.currentSelectedIndex === 1&&this.shelvesGoods[this.selectIndex].length!==1) {
        this.lastDisabled = true
        this.nextDisabled = false
        this.lastBtnType = 'info'
        this.nextBtnType = 'primary'
      }
      if (this.currentSelectedIndex === 1&&this.shelvesGoods[this.selectIndex].length===1) {
        this.lastDisabled = true
        this.nextDisabled = true
        this.lastBtnType = 'info'
        this.nextBtnType = 'info'
      }
      if (this.currentSelectedIndex!==1 && this.currentSelectedIndex===this.shelvesGoods[this.selectIndex].length) {
        this.lastDisabled = false
        this.nextDisabled = true
        this.lastBtnType = 'primary'
        this.nextBtnType = 'info'
      }

    },
    // 货架的选中
    selectUpShelf() {
      this.selectIndex--
      if (this.selectIndex < 0) {
        this.selectIndex = this.shelvesList.length - 1
      }
      this.swiper.slideNext();
      this.selectShelf()
      this.updateSwiperContainerClass()
    },
    // 货架的选中
    selectDownShelf() {
      this.selectIndex++
      if (this.selectIndex >= this.shelvesList.length) {
        this.selectIndex = 0
      }
      this.swiper.slidePrev()
      this.selectShelf()
      this.updateSwiperContainerClass()
    },
    // 货架的选中
    selectShelf() {
      this.selectId = this.shelvesList[this.selectIndex].id
      this.shelves = this.shelvesList[this.selectIndex]
      this.currentSelectedIndex = 1
      this.selectPositionId = this.shelvesGoods[this.selectIndex][0].id
      this.selectPositionInfo = {}
      this.queryByPositionId(this.selectPositionId)
      if (this.collectOrReturn) {
        // this.cancelOperate()
      }
    },
    // 物料的切换
    handoffPosition(num) {
      if (this.shelvesGoods.length) {
        if (num === 1) {
          if (this.currentSelectedIndex === this.shelvesGoods[this.selectIndex].length) {
            this.currentSelectedIndex = 1
          } else {
            this.currentSelectedIndex++
          }
        } else {
          if (this.currentSelectedIndex === 1) {
            this.currentSelectedIndex = this.shelvesGoods[this.selectIndex].length
          } else {
            this.currentSelectedIndex--
          }
        }
        this.selectPositionId = this.shelvesGoods[this.selectIndex][this.currentSelectedIndex - 1].id
      }
      this.selectPositionInfo = {}
      // 实现防抖
      if (this.infoTimer) {
        clearTimeout(this.infoTimer)
        this.infoTimer = null
      }
      this.infoTimer = setTimeout(() => {
        this.queryByPositionId(this.selectPositionId)
      }, 300)

    },
    // 选择库位
    chooseItem(item) {
      this.selectPositionId = item.id
      this.selectPositionInfo = {}
      this.queryByPositionId(item.id)
      this.currentSelectedIndex = this.shelvesGoods[this.selectIndex].findIndex(item2 => item2.id === item.id) + 1
    },
    // 手动领用或归还选中的数据
    collectOrReturnChangeMerge(data,smartIndex,item) {
      this.smartSelectData[smartIndex]= data
      this.collectOrReturnData =[]
      for (let objDataKey in this.smartSelectData) {
        this.collectOrReturnData.push(...this.smartSelectData[objDataKey])
      }
      console.log(this.collectOrReturnData)
      this.chooseItem(item)

    },
    // 获取货架列表
    getList() {
      const loading = this.$loading({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(0, 0, 0, 0.6)'
      })
      getShelvesList().then(async res => {
        loading.close()
        if (res.result.length === 0) {
          this.$message({
            message: '暂无货架数据',
            type: 'warning',
            showClose: true
          })
          return
        }
        this.shelvesList = res.result
        // this.shelvesList[0].className = 'smartShelf-content-item-select'
        this.shelves = res.result[0]
        this.selectId = res.result[0].id
        this.showShelves = true
        let that= this
        this.$nextTick(() => {
          this.swiper = new swiper('.swiper-container', {
            loop: false, //无缝轮播
            loopedSlides: this.shelvesList.length, // 替换成你的实际附加滑块数
            mousewheelControl: true,//开启鼠标滚轮控制
            grabCursor: true,//鼠标触摸Swiper 时变成小手
            centeredSlides: true,//居中显示
            centeredSlidesBounds: true,
            slidesPerView: 'auto',
             slideToClickedSlide: true, //设置为true则点击slide会过渡到这个slide。
            coverflowEffect: {
              // 旋转
              rotate: 20,
              // 延展
              stretch: 0,
              //纵向
              depth: 200,
              modifier: 1,
              // 阴影
              slidesShadows: true

            },
            on:{
              init(){
                // this.setTranslate(0);
              },
              slideChange: () => {
                // 获取当前滑块索引并更新
                // this.currentSlideIndex = this.swiper.realIndex;

                this.selectTheShelf()
                this.updateSwiperContainerClass()
              }
              // transitionStart(){ // 开始translate之前触发
              //     // 如果是第一张
              //     if(this.activeIndex == 0){
              //       console.log(this.activeIndex)
              //         this.setTranslate(0); // 因为左边会空出一张图的距离，所以设置位移为0
              //     }
              //     if(this.activeIndex == 6){
              //       console.log(this.activeIndex)
              //         this.setTranslate(-1656); // 因为左边会空出一张图的距离，所以设置位移为0
              //     }
              // },
            }
          })


        })
        // 遍历result，获取goodsImage存入一个新数组，数组和货架列表的数组一一对应
        this.shelvesGoods = []
        // 将所有的库位数据放入一个数组中
        res.result.forEach(item => {
          let arr2 = []
          item.layerList.forEach(item2 => {
            item2.positionList.forEach(item3 => {
              arr2.push(item3)
            })
          })
          this.shelvesGoods.push(arr2)
        })
        this.selectPositionId = this.shelvesGoods[0][0].id
        let { result } = await this.queryByPositionId(this.selectPositionId)
        this.selectPositionInfo = result
      }).catch(err => {
        loading.close()
      })

    },
    // 修改滑块样式
    updateSwiperContainerClass() {
      // Get the current slide index
      // const currentIdx = this.selectIndex;
      //
      // // Get all swiper slides
      // // const swiperSlides = document.querySelectorAll('.swiper-slide');
      // const swiperSlides = document.querySelectorAll('.smartShelf-content-item');
      //
      // // Update class based on the index comparison
      // swiperSlides.forEach((slide, index) => {
      //   if (index === currentIdx) {
      //     console.log('下标'+index)
      //     console.log('当前下标'+currentIdx)
      //     slide.classList.add('smartShelf-content-item-select');
      //   } else {
      //     slide.classList.remove('smartShelf-content-item-select');
      //   }
      // });

      // this.$nextTick(() => {
      //   this.shelvesList.forEach(item => {
      //     this.$set(item, 'className', ''); // 先将所有元素的 className 清空
      //     if (item.id === this.selectId) {
      //       this.$set(item, 'className', 'smartShelf-content-item-select');
      //     } else {
      //       this.$set(item, 'className', '');
      //     }
      //   });
      // });

    },
    // 根据库位id查询库位详情
    async queryByPositionId(id) {
      let { result } = await queryByPositionId({ positionId: id })
      this.selectPositionInfo = result
    },
    // 库位指引
    locationGuidelines() {
      this.$confirm('是否启用灯光指引?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实现防抖
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        this.timer = setTimeout(() => {
          let info = {
            id: this.selectPositionId
          }
          lampPositionIsOpen(info).then(res => {
            console.log(res)
          })
        }, 300)
      });
    },
    // 确认物料弹窗确认按钮
    requisitionCompleted(list, taskName,nickName) {
      this.goodsList = list
      this.taskName = taskName || '默认任务'
      this.nickName = nickName || ''
      this.$store.commit('settings/CHANGE_SETTING', {
        key: 'isRealTimeOpen',
        value: true
      })
      // 打开实时出入库弹窗
      this.showRealDialog = true
    },
    // 实时出入库弹窗确认按钮
    operationCompleted() {
      this.showRealDialog = false
      this.showDialog = false
      this.getList()
    },
    // 接收websocket消息
    operateMessage(data) {
      if (data.type === 'inout' && data.message === 'closed') {
        this.inOutList = []
      } else if (data.type === 'inout' && data.message !== 'closed') {
        if (this.showRealDialog) {
          this.inOutList = JSON.parse(data.message)
        }
      }
    }
  },

  // 生命周期 - 创建完成（可以访问当前this实例，完成了data 数据的初始化，可以访问data、computed、watch、methods上的方法和数据。但是，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空。）
  created() {
    this.getList()
  },

  // 生命周期 - 挂载完成（可以访问DOM元素，一般在此执行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。）
  mounted() {

    this.$eventBus.$on('webSocketMsgPage', this.operateMessage)
  },

  // 生命周期-页面销毁前（在销毁前，实例中所有的data、methods、computed、指令等，都处于可用状态在此阶段，一般进行：关闭定时器、取消订阅消息解绑自定义事件等收尾工作。）
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
    if (this.infoTimer) {
      clearTimeout(this.infoTimer)
      this.infoTimer = null
    }
    this.$eventBus.$off('webSocketMsgPage', this.operateMessage)
  }
}
</script>

<style lang='scss' scoped>
@import '@/styles/_handle.scss';

.swiper-container {
  height:185px;
  padding: 10px;
  width: 100%;
}

.swiper-wrapper .swiper-slide {
  width: 367px;
  margin: 0 10px;
  height: 100%;
}

.smartShelf {
  width: 100%;

  &-top {
    @include background('shelf_top_bg_color');
    height: 70px;
    -webkit-clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);
    clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 5px;
    margin-bottom: 20px;

    &-left {
      .r-txt {
        color: #FF1F06;
        margin-right: 20px;
      }

      .g-txt {
        color: #10E57F;
        margin-right: 20px;
      }

      .g-status {
        width: 16px;
        height: 16px;
        background: #0CA47E;
        border-radius: 4px;
        margin-right: 5px;
      }

      .r-status {
        background: #FF1F06;
      }

      .r-status2 {
        background: none;
        border: 2px solid #FF1F06;
      }
    }
  }

  &-content {
    height: 185px;
    margin: 20px;
    overflow-x: auto;
    padding-bottom: 10px;

    &-item {
      -webkit-clip-path: polygon(calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px, 8px 0);
      clip-path: polygon(calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px, 8px 0);
      margin-right: 20px;
      flex-shrink: 0;
      width: 367px;
      height: 100%;
      @include background('smart_shelf_bg');
      border: 1px solid;
      @include border_image('dialog_border_image');
      user-select: none;
      cursor: pointer;
      transition: 0.3s all;

      &-top {
        transition: 0.3s all;
        width: 100%;
        height: 54px;
        @include background('smart_shelf_top_bg');
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;

        .t-num {
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          @include background('smart_shelf_num_bg');
          border-radius: 4px;
          margin: 0 20px;
        }
      }

      &-bottom {
        width: 100%;
        height: 111px;
        text-align: center;

        .b-item {
          width: 48px;
          height: 48px;
          padding: 2px;
          background: linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 86%);
          box-shadow: 0 2px 0 0 rgba(0, 24, 50, 0.5);
          border-radius: 8px;
          border: 2px solid #B0B0B0;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .b-txt {
          font-size: 18px;
          font-weight: 400;
          color: #FFFFFF;
          margin-top: 6px;
        }
      }
    }

    &-item-select {
      @include background('smart_shelf_layers_bg');

      .smartShelf-content-item-top {
        @include background('smart_shelf_top_bg_select');
      }
    }

  }

  &-bottom {
    width: 100%;
    height: 100%;
    padding: 20px;

    &-tip {
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      width: 100%;
      margin-bottom: 10px;
      font-weight: 500;
      font-size: 24px;
      color: #FFFFFF;
      @include background('dialog_div_tip_color');
      -webkit-clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
      clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
      @include background-size("dialog_div_tip_size");

      .tip-num {
        margin-left: 20px;
        margin-right: 20px;
      }
    }

    &-box {
      padding: 0 40px;
      height: 140px;
      @include background("smart_shelf_wl_bg");
      border: 1px solid;
      @include border_image("dialog_border_image");

      &-item {
        width: 25%;
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;

        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>
